import { Image } from 'antd';
import LogoIcon from '@/assets/icons/ai-logo-eai.svg';

import CampusTitle from '@/assets/icons/ic_rj_campus2.svg';
import { useAppInfo } from '@/store/configStore';
import { useState, useEffect } from 'react';

const HeaderLogo = ({ istext }) => {
  const appInfo = useAppInfo();
  const [isSafariSupported, setIsSafariSupported] = useState(true);
  useEffect(() => {
    const userAgent = navigator.userAgent;
    const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);

    if (isSafari) {
      const safariVersionMatch = userAgent.match(/version\/(\d+(:?\.\d+)*)/i);
      if (safariVersionMatch && safariVersionMatch[1]) {
        const safariVersion = parseFloat(safariVersionMatch[1]);
        if (safariVersion < 15.4) {
          setIsSafariSupported(false);
        }
      }
    }
  })
  return (
    <div className="fixed top-1 left-1 p-4" style={{ zIndex: 200 }}>
      <div className="flex items-center space-x-2 jr-step-3">
        {appInfo?.logo ? (
          <Image src={`${appInfo?.logo}`} height={35} width={35} preview={false} />
        ) : (
          <Image src={LogoIcon} height={35} width={35} preview={false} />
        )}
        {/* <Image
          src={LogoIcon}
          width={35}
          height={35}
          preview={false}
        /> */}
        {/* {istext && <Image src={CampusTitle} height={35} width={105} preview={false} />} */}
        {istext && (
          appInfo?.display_name == '校园百事通' ? (
            <Image src={CampusTitle} height={35} width={105} preview={false} />
          ) : (
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                background: isSafariSupported
                  ? 'linear-gradient(90deg, #9D00FF 9.4%, #0007FF 58.98%)'
                  : 'unset',
                WebkitBackgroundClip: isSafariSupported ? 'text' : 'unset',
                WebkitTextFillColor: isSafariSupported ? 'transparent' : 'unset',
              }}
            >
              <div
                style={{
                  fontSize: '33px',
                  fontWeight: '500',
                  lineHeight: 1,
                  paddingBottom: '10px',
                  color: isSafariSupported ? 'unset' : '#4B27E3',
                  fontFamily: 'sans-serif',
                  letterSpacing: (appInfo?.display_name?.length || 0) < 3 ? '5px' : '0',
                }}
              >
                {appInfo?.display_name}
              </div>
            </div>
          )
        )}
      </div>
    </div>
  );
};

export default HeaderLogo;
